<template>
  <view class="flex flex-column align-center">
    <u-navbar title="修改密码" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <u-form
        :error-type="errorType"
        ref="form"
        :label-style="{ fontSize: 32 + 'rpx', marginLeft: 30 + 'rpx' }"
        :model="formInfo"
        class="p-lr-20 mt-50 w-full"
        label-width="208"
    >
      <u-form-item label="原密码" prop="oldPassword">
        <u-input
            v-model="formInfo.oldPassword"
            placeholder="请输入旧密码"
            placeholder-style="fontSize:32rpx;color:#CCCCCC"
            type="password"
            :clearable="false"
            :password-icon="false"
        />
      </u-form-item>
      <u-form-item label="新密码" prop="newPassword">
        <u-input
            v-model="formInfo.newPassword"
            placeholder="请输入新密码"
            placeholder-style="fontSize:32rpx;color:#CCCCCC"
            type="password"
            :clearable="false"
            :password-icon="false"
        />
      </u-form-item>
      <u-form-item label="确认密码" prop="confirmPassword">
        <u-input
            v-model="formInfo.confirmPassword"
            placeholder="请确认新密码"
            placeholder-style="fontSize:32rpx;color:#CCCCCC"
            type="password"
            :clearable="false"
            :password-icon="false"
        />
      </u-form-item>
    </u-form>
    <view
        class="mt-200 w-250 h-80 lh-80 color-fff text-center bg-19BE6B fz-30 br-10"
        @tap="submit"
    >
      <text>确认修改</text>
    </view>
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="isModalShow">
      <view class="h-150 flex align-center justify-center font-bold fz-30 p-lr-40">
        <image v-if="isError" class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <image v-else class="mr-20 w-38 h-38" src="@/static/images/mine/success.png"></image>
        <text class="flex1">{{errorContent}}</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    return {
      isModalShow:false,
      errorContent:'',
      isError:'true',
      errorType: ['border-bottom'],
      formInfo: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      rules: {
        oldPassword: [
          {
            required: true,
          },
        ],
        newPassword: [
          {
            required: true,
          },
        ],
        confirmPassword: [
          {
            required: true,
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    validate(formInfo){
      //字母 数字 特殊字符三选二 8-32位
      let reg = new RegExp(/^(?![a-zA-Z]+$)(?![0-9]+$)(?![\W_]+$)[a-zA-Z0-9\W_]{8,32}$/g)
      if(!reg.test(formInfo.newPassword)){
        this.errorContent = "密码长度8-32位，至少包含字母、数字、特殊符号中的其中两种!"
        this.isModalShow = true
        this.isError = true
        return false
      }
      if(formInfo.newPassword !== formInfo.confirmPassword){
        this.errorContent = "两次密码输入不一致，请重新输入!"
        this.isModalShow = true
        this.isError = true
        return false
      }
      return true
    },
    submit() {
      //三个输入框非空进入后续验证
      this.$refs.form.validate((valid) => {
        if(valid){
          if(this.validate(this.formInfo)){
            updateUserPwd(this.formInfo.oldPassword, this.formInfo.newPassword).then(
                (res) => {
                  if(1){//暂时无返回状态码判断
                    this.errorContent = "密码修改成功!"
                    this.isModalShow = true
                    this.isError = false
                    return false
                  }
                  else{
                    this.errorContent = "原密码错误,请重新输入!"
                    this.isModalShow = true
                    this.isError = true
                    return false
                  }
                }
            );
          }
        }
      })
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
